<template>
  <van-collapse-item title="会议日程" name="speaker">
    <van-notice-bar
      left-icon="volume-o"
      color="var(--color-primary)"
      background="var(--color-primary-light)"
      text="主持环节需要在主席，讲课，讨论等环节添加完成之后再添加。主席，讲课，讨论等非主持环节请按照时间顺序依次添加。"
    />
    <speaker-item
      v-for="(item, index) in speaker.value"
      :key="item"
      ref="refSpeakerItem"
      :base-info="baseInfo"
      :is-allow-update="isAllowUpdate"
      :schedules-index="index"
      :speaker-item="speakerItemObj"
      :role="item"
      :schedules="schedules"
      @update="updateSpeaker"
      @delete="handleDelete(index)"
    ></speaker-item>

    <div class="add_meeting_link" v-if="isAllowUpdate">
      <van-button type="primary" size="small" block plain icon="add" @click="clickAddMeetingLink">添加会议环节</van-button>
    </div>

    <van-action-sheet
      v-model:show="speaker.visible"
      :actions="speakerOptions"
      cancel-text="取消"
      close-on-click-action
      @select="clickSelectMeetingLink" 
    />
  </van-collapse-item>
</template>

<script setup>
  import { ref, reactive, computed, nextTick } from 'vue'
  import SpeakerItem from './speaker-item.vue'
  import { showConfirmDialog } from 'vant';
  import { useStore } from 'vuex'

  const props = defineProps({
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    isAllowUpdate: {
      type: Boolean,
      default: true
    }
  })
  const emits = defineEmits('update')
  const store = useStore()

  const speaker = reactive({
    visible: false,
    value: [],
    options: [
      { name: '主席', role: 1 },
      { name: '讲者', role: 2 },
      { name: '讨论', role: 3 },
      { name: '主持', role: 4 },
    ]
  })
  const speakerOptions = computed(() => {
    return speaker.options.map(item => ({
      ...item,
      color: speaker.value.includes(item.role) ? `#${store.state.tenant.config.frontPrimaryColor}` : '#000'
    }))
  })

  // 添加会议环节
  function clickAddMeetingLink () {
    speaker.visible = true
  }
  // 确认添加会议环节
  function clickSelectMeetingLink (detail) {
    speaker.value.push(detail.role)
    // if (speaker.value.includes(detail.role)) {
    //   showConfirmDialog({
    //     title: '温馨提示',
    //     message: `${detail.name}环节已添加，确定删除吗？`
    //   }).then(() => {
    //     const index = speaker.value.indexOf(detail.role)
    //     speaker.value.splice(index, 1)
    //     nextTick(() => {
    //       updateSpeaker()
    //     })
    //   }).catch(() => {})
    // } else {
    //   speaker.value.push(detail.role)
    // }
  }
  // 删除
  function handleDelete (index) {
    showConfirmDialog({
      title: '温馨提示',
      message: `确定删除当前环节吗？`
    }).then(() => {
      speaker.value.splice(index, 1)
      nextTick(() => {
        updateSpeaker()
      })
    }).catch(() => {})
  }

  const refSpeakerItem = ref();
  const refZx = ref();
  const refJz = ref();
  const refTl = ref();
  const schedules = ref([])
  const speakerItemObj = {
    speakers: [{
      speakerId: '',
      speakerAppearanceFeeAftertax: '',
      speakerAppearanceFeePretax: '',
      speakerName: '',
      speakerRole: '',
    }],
    topic: '',
    scheduleType: '',
    startTime: '',
    step: '',
    endTime: '',
    uuidList: []
  }

  function updateSpeaker () {
    schedules.value = (refSpeakerItem.value || []).map(item => item.params)
    emits('update', schedules.value)
  }

  defineExpose({
    getParams: () => {
      let list = []
      schedules.value.forEach(item => {
        list = [...list, ...item]
      })
      return list
    },

    setParams (detail) {
      const paramsObj = {}
      detail.schedules.forEach((item, index) => {
        speaker.value.push(item.scheduleType);
        paramsObj[`${index}-${item.scheduleType}`] = [item];
        // paramsObj[item.speakers[0].speakerRole] = [item];
        // if (!speaker.value.includes(item.speakers[0].speakerRole)) {
        //   speaker.value.push(item.speakers[0].speakerRole);
        //   paramsObj[item.speakers[0].speakerRole] = [item];
        // } else {
        //   paramsObj[item.speakers[0].speakerRole].push(item)
        // }
      })
      nextTick(() => {
        speaker.value.forEach((item, index) => {
          refSpeakerItem.value[index]?.setParams(paramsObj[`${index}-${item}`])
        })
      })
    }
  })
</script>